<template>
  <div>
    <el-table :data="dataList" border >
      <el-table-column label="编号" prop="ln"></el-table-column>
      <el-table-column label="分路ID" prop="lnid"></el-table-column>
      <el-table-column label="分路名" prop="title">
        <template slot-scope="scope">
          <el-input v-model="scope.row.title" placeholder="分路名"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="house_type">
        <template slot-scope="scope">
          <el-select v-model="scope.row.house_type" placeholder="类型">
            <el-option :value="0" label="--" key="-1"></el-option>
            <el-option v-for="(item,key,index) in housetype" :label="item" :value="key" :key="index"></el-option>
          </el-select>          
        </template>
      </el-table-column>
      <el-table-column label="业主姓名" prop="username">
        <template slot-scope="scope">
          <el-input v-model="scope.row.username" placeholder="业主姓名"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="业主电话" prop="roomtel">
        <template slot-scope="scope">
          <el-input v-model="scope.row.roomtel" placeholder="业主电话"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="房屋编码" prop="room_no">
        <template slot-scope="scope">
          <el-input v-model="scope.row.room_no" placeholder="房屋编码"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="监测编码" prop="monitor_no">
        <template slot-scope="scope">
          <el-input v-model="scope.row.monitor_no" placeholder="监测编码"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top:20px;"><el-button type="primary" @click="submit">保存</el-button></div>
  </div>
</template>

<script>
import { subuser,subusesave } from '@/api/equipment/index.js';
export default {
  props: ['deviceid'],
  watch: {
    deviceid: {
      handler: function (val) {
        if (val) {
          this.query.deviceid = val;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      query: {
        deviceid: '',
      },
      dataList: [],
      housetype:{},
    };
  },
  methods: {
    getData() {
      subuser(this.query).then((res) => {
        console.log(res, ' subuser');
        this.dataList = res.data.list;
        this.housetype = res.data.housetype;

      });
    },
    submit(){
      let submitData = {
        deviceid:this.query.deviceid,
        title:{},
        housetype:{},
        username:{},
        roomtel:{},
        roomno:{},
        monitorno:{}
      };
      this.dataList.forEach(item=>{
        submitData.title[item.lnid] = item.title
        submitData.housetype[item.lnid] = item.house_type
        submitData.username[item.lnid] = item.username?item.username:''
        submitData.roomtel[item.lnid] = item.roomtel?item.roomtel:''
        submitData.roomno[item.lnid] = item.room_no?item.room_no:''
        submitData.monitorno[item.lnid] = item.monitor_no?item.monitor_no:''
      })      
      //这里原来的功能就是不全的，因此现在是复制了原来的功能，复制完成后再来做这里的优化。
      subusesave(submitData).then(res=>{
        console.log(res,'保存的结果')
      })      
    }
  },
};
</script>

<style scoped></style>
